<template>
    <div class="sdy-not-found">
      <SdyHeader title="啥都有 ~ 订单" back></SdyHeader>
      <!-- aaa -->
      <van-form @submit="submitHandler">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="姓名"
          />
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
          />
        </van-cell-group>
        <van-field
          v-model="city"
          is-link
          readonly
          name="picker"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
  
          <van-area
            title="标题"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            :area-list="areaList" />
        </van-popup>
        <van-cell-group inset>
          <van-field
            v-model="address"
            name="详细地址"
            label="详细地址"
            placeholder="详细地址"
            :rules="[{ required: true, message: '请填写详细地址' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
  
  
      <!-- 展示订单信息 -->
      <SdyOrderInfo v-if="showInfo" @finish="orderFinishHandler" :info="info" />
      <SdyOrderList v-if="showList" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { areaList } from '@vant/area-data'
  import { updateAddressInfoApi } from '@/api/order'
  import SdyOrderInfo from './components/SdyOrderInfo.vue'
  import SdyOrderList from './components/SdyOrderList.vue'
  
  // 准备表单需要的数据
  const username = ref<string>('')
  const phone = ref<string>('')
  const city = ref<string>('')
  const address = ref<string>('')
  const showPicker = ref<boolean>(false)
  const showInfo = ref<boolean>(false)
  const showList = ref<boolean>(false)
  
  // 准备一个信息
  const info = ref()
  // 城市数据直接写好
  
  const submitHandler = async () => {
    // 准备信息
    info.value = {
      userid: window.localStorage.getItem('user_id') as string,
      name: username.value,
      tel: phone.value,
      province: city.value.split('/')[0],
      city: city.value.split('/')[1],
      county: city.value.split('/')[2],
      addressDetail: address.value,
      time: window.localStorage.getItem('time') as string
    }
  
    const res = await updateAddressInfoApi(info.value)
  
    // 当订单信息展示出来
    showInfo.value = true
  }
  
  const onConfirm = (info: { name: string, value: string }[]) => {
    console.log('确认选择', info)
    // 把选择到的内容组装成一个完整的字符串
    const str = info.reduce((prev, item) => {
      return prev + '/' + item.name
    }, '').slice(1)
    // 把补充好的内容放在 city 信息内
    city.value = str
    // 关闭 对话框
    showPicker.value = false
  }
  
  // 确认订单成功
  const orderFinishHandler = () => {
    showInfo.value = false
    showList.value = true
  }
  
  // 采集订单所需的信息
  
  // 采集完毕以后, 填充到指定位置
  
  // 确认订单信息
  
  // 查看所有订单
  </script>
  
  <style scoped lang="scss"></style>